<template>
	<div class="content disBox">
		<div class="searchBox">
			<div>
				<div class="searchTop">
					<span class="searchText">手机号:</span><input type="text" class="searchInput" v-model="phone" placeholder="请输入会员手机号">
					<span class="searchText">活动主题:</span><input type="text" class="searchInput" v-model="activityTheme" placeholder="请输入活动主题">
					<span class="searchText">优惠券类型:</span>
					<select class="searchInput" v-model="couponType">
						<option value="">请选择优惠类型</option>
						<option value="1">系统送券</option>
						<option value="2">人工送券</option>
					</select>
					<span class="searchText">优惠金额:</span><input type="text" class="searchInput" v-model="discountMoney" placeholder="请输入优惠金额">
					<div class="searchBut" @click="searchCouponList"><img src="../../assets/search.png" class="foundPic"/>搜索</div>
					<div class="openBtn" @click="openBottom" v-show="showOpenBtn"></div>
					<div class="closeBtn" @click="closeBottom" v-show="showCloseBtn"></div>
				</div>
				<div v-show="showSearchBottom">
					<span class="searchText">使用状态:</span>
					<select class="searchInput status" v-model="status">
						<option value="">请选择使用状态</option>
						<option value="880010">未使用</option>
						<option value="880011">已使用</option>
						<option value="880012">已过期</option>
						<!-- <option value="">已收回</option>
						<option value="">即将可用</option> -->
					</select>
					<span class="searchText">领券日期区间:</span>
					<el-date-picker v-model="betweenTime" type="datetimerange" :picker-options="pickerOptions" range-separator="~" start-placeholder="开始日期" end-placeholder="结束日期" align="right">
					</el-date-picker>
					<span class="searchText">结束日期区间:</span>
					<el-date-picker v-model="time" type="datetimerange" :picker-options="pickerOptions" range-separator="~" start-placeholder="开始日期" end-placeholder="结束日期" align="right">
					</el-date-picker>
				</div>
			</div>
		</div>
		<div class="tableBox">
			<div class="playBox">
				<div :class="[one,{'detail':classa,'gray':classb}]" @click="couponDetail">详情</div>
				<div class="butInfoMes export" @click="exportCouponList">导出</div>
			</div>
			<div class="contentTable">
				<div v-if="searchType == 1">
					<img src="~_assets/fail.png" class="searchResult">
				</div>
				<div v-else-if="searchType == 2">
					<img src="~_assets/nosearch.png" class="searchResult">
				</div>
				<bootstrap-table :my_columns="my_columns" :my_data="data1" :my_options="my_options" v-else @item="getItem" ref="table1"></bootstrap-table>
			</div>
		</div>
		<div v-if="showCouponDetailDiv">
			<CouponDetail @closeAlert='closeAlert' :items="trData"></CouponDetail>
		</div>
	</div>
</template>

<script>
import CouponDetail from "./children/CouponDetail";
import { time } from "_config/common.js";
import { publicVM } from "_config/public.js";
import {
  COUPON_CATEGORY_STATISTIC,
  EXPORT_COUPON_CATEGORY_STATISTIC
} from "@/config/url";
export default {
  mixins: [publicVM],
  components: {
    CouponDetail
  },
  data() {
    return {
      one: "butInfoMes",
      classa: false,
      classb: true,
      searchType: "12",
      pickerOptions: time,
      showSearchBottom: false,
      showCloseBtn: false,
      showOpenBtn: true,
      showCouponDetailDiv: false,
      phone: "", //会员手机号
      activityTheme: "", //活动主题
      couponType: "", //优惠券类型
      discountMoney: "", // 优惠金额
      status: "", //使用状态
      betweenTime: "", //领券日期区间
      time: "", //结束日期区间
      trData: "",
      page: 1,
      size: 10,
      my_columns: [
        {
          title: "序号",
          field: "",
          formatter: function(value, row, index) {
            return index + 1;
          }
        },
        {
          title: "会员手机号",
          field: "phone_num"
        },
        {
          title: "活动主题",
          field: "activity_theme"
        },
        {
          title: "优惠金额(元)",
          field: "money"
        },
        {
          title: "使用阀值(元)",
          field: "cost_money"
        },
        {
          title: "使用时段",
          field: "used_timestamp"
        },
        {
          title: "领取日期",
          field: "create_time",
          sortable: true
        },
        {
          title: "结束日期",
          field: "end_time",
          sortable: true,
          formatter: function(value, row, index) {
            return value;
          }
        },
        {
          title: "使用状态",
          field: "status"
        }
      ],
      data1: [],
      my_options: {
        pagination: true
        // sidePagination:'server'
      },
      config: {
        checkbox_rows: true,
        rows_selectable: true,
        card_title: "Vue Bootsrap 4 advanced table"
      }
    };
  },
  mounted: function() {
    this.searchCouponList();
  },
  methods: {
    getItem(data) {
      if (data && data.id) {
        this.classa = true;
        this.classb = false;
        this.trData = data;
      }
    },
    openBottom() {
      this.showSearchBottom = true;
      this.showCloseBtn = true;
      this.showOpenBtn = false;
    },
    closeBottom() {
      this.showSearchBottom = false;
      this.showCloseBtn = false;
      this.showOpenBtn = true;
    },
    couponDetail() {
      this.showCouponDetailDiv = true;
    },
    closeAlert() {
      this.showCouponDetailDiv = false;
    },
    searchCouponList() {
      this.my_options = {
        pagination: true,
        sidePagination: "server",
        url: COUPON_CATEGORY_STATISTIC,
        queryParams: this.getParams
      };
    },
    getParams() {
      this.classa = false;
      this.classb = true;
      let betweenStartTime;
      let betweenEndTime;
      let startTime;
      let endTime;
      if (this.betweenTime == "" || this.betweenTime == null || this.betweenTime == undefined) {
        betweenStartTime = "";
        betweenEndTime = "";
      } else {
        betweenStartTime = this.moment(this.betweenTime[0]).format(
          "YYYY-MM-DD HH:mm:ss"
        );
        betweenEndTime = this.moment(this.betweenTime[1]).format(
          "YYYY-MM-DD HH:mm:ss"
        );
      }
      if (this.time == "" || this.time == null || this.time == undefined) {
        startTime = "";
        endTime = "";
      } else {
        startTime = this.moment(this.time[0]).format("YYYY-MM-DD HH:mm:ss");
        endTime = this.moment(this.time[1]).format("YYYY-MM-DD HH:mm:ss");
      }
      let param = {
        phone: this.phone,
        activityTheme: this.activityTheme,
        couponType: this.couponType,
        discountMoney: this.discountMoney,
        status: this.status,
        betweenStartTime: betweenStartTime,
        betweenEndTime: betweenEndTime,
        startTime: startTime,
        endTime: endTime,
        page: this.$refs.table1.local.options.pageNumber,
        size: this.$refs.table1.local.options.pageSize
      };
      return param;
    },
    exportCouponList() {
      let betweenStartTime;
      let betweenEndTime;
      let startTime;
      let endTime;
      if (this.betweenTime == "" || this.betweenTime == null || this.betweenTime == undefined) {
        betweenStartTime = "";
        betweenEndTime = "";
      } else {
        betweenStartTime = this.moment(this.betweenTime[0]).format(
          "YYYY-MM-DD HH:mm:ss"
        );
        betweenEndTime = this.moment(this.betweenTime[1]).format(
          "YYYY-MM-DD HH:mm:ss"
        );
      }
      if (this.time == "" || this.time == null || this.time == undefined) {
        startTime = "";
        endTime = "";
      } else {
        startTime = this.moment(this.time[0]).format("YYYY-MM-DD HH:mm:ss");
        endTime = this.moment(this.time[1]).format("YYYY-MM-DD HH:mm:ss");
      }
      this.tableExport(
        EXPORT_COUPON_CATEGORY_STATISTIC +
          "?phone=" +
          this.phone +
          "&activityTheme=" +
          this.activityTheme +
          "&couponType=" +
          this.couponType +
          "&discountMoney=" +
          this.discountMoney +
          "&status=" +
          this.status +
          "&betweenStartTime=" +
          betweenStartTime +
          "&betweenEndTime=" +
          betweenEndTime +
          "&startTime=" +
          startTime +
          "&endTime=" +
          endTime
      );
    }
  }
};
</script>

<style lang="less">
.disBox {
  .status {
    margin-top: 0.08rem;
  }
  .searchTop {
    display: flex;
    align-items: center;
  }
  .openBtn {
    position: absolute;
    right: 0.1rem;
    width: 0.2rem;
    height: 0.15rem;
    background: url(../../assets/more.png) no-repeat;
  }
  .openBtn:hover {
    width: 0.25rem;
    height: 0.42rem;
    background: url(../../assets/hover.png) no-repeat;
    background-size: 100% 100%;
  }
  .closeBtn {
    position: absolute;
    top: 0;
    right: 0.1rem;
    width: 0.25rem;
    height: 0.66rem;
    background: url(../../assets/less.png) no-repeat;
    background-size: 100% 100%;
  }

  .el-input__inner {
    height: 0.18rem;
    border-radius: 8px;
    padding-left: 0.08rem;
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(181, 194, 202, 1);
    margin-right: 0.2rem;
    margin-left: 0.04rem;
  }

  .contentTable {
    width: 99%;
  }

  .bootstrap-table {
    padding-top: 0;
  }
  .bootstrap-table table thead tr th,
  .bootstrap-table table tbody tr td {
    width: 6%;
  }
  .bootstrap-table table thead tr th:nth-of-type(1),
  .bootstrap-table table tbody tr td:nth-of-type(1) {
    width: 3%;
  }
}
</style>